<template>
  <a-tabs v-model:activeKey="activeKey">
    <a-tab-pane key="1" tab="上映中的电影">
      <div class="one-row-list-box">
        <MediaCard v-for="item in movieList" :model="item" class="card"/>
      </div>
    </a-tab-pane>
    <a-tab-pane key="2" tab="在播的电视剧" force-render>
      <div class="one-row-list-box">
        <MediaCard v-for="item in tvList" :model="item" class="card"/>
      </div>
    </a-tab-pane>
  </a-tabs>
</template>
  
<script name="now" setup>
import { ref } from 'vue';
import MediaCard from './media-card.vue'

import MediaApi from '@/api/MediaApi';
 
const activeKey = ref('1')

const tvList = ref([]);
const movieList = ref([]);

const loadTv = () => {
  MediaApi.tvNow().then(res => {
    if (res.data.data) {
      tvList.value = res.data.data;
    }
  })
}

const loadMovie = () => {
  MediaApi.movieNow().then(res => {
    if (res.data.data) {
      movieList.value = res.data.data;
    }
  })
}

// init
loadTv()
loadMovie()

</script>

<style scoped>
.one-row-list-box {
  display: flex;
  width: 100%;
  overflow-x: auto;
}

.card {
  width: 240px;
  flex-shrink: 0;
  margin:0 20px 20px 20px;
}
</style>